<template>
    <a-layout class="al-layout-dpa">
        <!--头部-->
        <a-layout-header :style="getHeaderStyle" class="dpa-head-linear">
            <dpa-header :portal-configuration="portalConfiguration" :title-style="titleStyle" />
        </a-layout-header>
        <a-layout-content>
            <!--左边菜单-->
            <div class="left-menu" :style="getDpaLefMenuStyle">
                <left-dpa
                    :config="config"
                    :client-type="clientType"
                    :menu-list="leftMenuList"
                    @getSecondaryMenu="getSecondaryMenu"
                />
            </div>
            <!--中间-->
            <div class="center-content">
                <template v-if="!isEmpty($slots)">
                    <slot name="page"></slot>
                </template>
                <template v-else>
                    <router-view />
                </template>
            </div>
            <!--右边菜单-->
            <div class="right-menu" :style="getDpaRightStyle">
                <dpa-right-menu :config="config" :menu-list="rightMenuList" />
            </div>
        </a-layout-content>
        <!--底部-->
        <a-layout-footer :style="getFooterStyle">
            <footer-dpa
                :config="config"
                :default-code="defaultCode"
                :secondary-menu="secondaryMenu"
                :menu-info="BottomMenuList"
            />
        </a-layout-footer>
    </a-layout>
</template>

<script lang="ts">
    import { defineComponent, computed, watch, ref } from 'vue'
    import LeftDpa from './components/leftDpa.vue'
    import FooterDpa from './components/footerDpa.vue'
    import DpaHeader from './components/Header.vue'
    import DpaRightMenu from './components/RightMenu.vue'
    import useAlLayoutStyleEffect from '../../hooks/alLayoutStyleEffet'
    import useAlLayoutEffect from '@/layouts/hooks/alLayoutEffect'
    import useAlLayoutMenu from '@/layouts/hooks/alLayoutMenu'
    import { isEmpty } from '@/utils/is'
    import LayoutConfig from '../../layoutConfig.json'
    import DpaMenu from '../../dpaMenu.json'
    export default defineComponent({
        name: 'AlLayoutDpa',
        components: {
            DpaHeader,
            DpaRightMenu,
            LeftDpa,
            FooterDpa
        },
        props: {
            dpaPortalConfiguration: {
                type: Object,
                default: () => {
                    return LayoutConfig.dpaPortalConfiguration
                }
            },
            dpaMenuConfiguration: {
                type: Object,
                default: () => {
                    return DpaMenu
                }
            },
            layout: {
                type: String,
                default: 'vertical' // /  al-layout-vertical 纵向布局   al-layout-comprehensive 综合布局 al-layout-horizontal 横向布局
            },
            menuTheme: {
                // 菜单列表
                type: String,
                default: 'dark' // light dark
            },
            portalConfiguration: {
                type: Object,
                default: () => {
                    return LayoutConfig
                }
            },
            titleStyle: {
                type: Object,
                default: () => {
                    return {
                        title: LayoutConfig.titleSetting
                    }
                }
            },
            clientType: {
                // 客户端类型
                type: String,
                default: 'customer' // customer，develop
            }
        },
        setup(props) {
            // ---------------------------------------------------- 属性
            const { handleAddCousomsStyle, getCotentStyle } = useAlLayoutStyleEffect(handleGetStyle)
            const { setMenuListByPermission } = useAlLayoutEffect(props)
            const secondaryMenu = ref([])
            const config = ref(props.dpaPortalConfiguration)
            const { menuInfo, isAdvancedLayout } = useAlLayoutMenu()
            const defaultCode = ref('') // 默认菜单code
            // ---------------------------------------------------- 监听
            const rightMenuList = computed(() => {
                return setMenuListByPermission(menuInfo.value.rightMenuList, isAdvancedLayout.value ? 'mainRouterMap' : 'otherRouterList') || []
            })
            const leftMenuList = computed(() => {
                return setMenuListByPermission(menuInfo.value.leftMenuList, 'mainRouterMap') || []
            })
            const BottomMenuList = computed(() => {
                const menuList = setMenuListByPermission(menuInfo.value.bottomMenuList, isAdvancedLayout.value ? 'mainRouterMap' : 'otherRouterList') || []
                return menuList[0] || {}
            })
            const getFooterStyle = computed(() => {
                const {
                    marginSetting: {
                        bottomNavigation: { top = 0, right = 0, bottom = 0, left = 0 }
                    }
                } = config.value
                return `padding: ${top}px ${right}px ${bottom}px ${left}px`
            })
            const getHeaderStyle = computed(() => {
                const {
                    marginSetting: {
                        topNavigation: { top = 0, right = 0, bottom = 0, left = 0 }
                    }
                } = config.value
                return `padding: ${top}px ${right}px ${bottom}px ${left}px`
            })
            // 左边距
            const getDpaLefMenuStyle = computed(() => {
                const {
                    marginSetting: {
                        leftNavigation: { top = 0, right = 0, bottom = 0, left = 0 }
                    }
                } = config.value
                return `padding: ${top}px ${right}px ${bottom}px ${left}px`
            })
            // 颜色配置
            const dpaPortalColorConfiguration = computed(() => {
                return {
                    top: config.value.colorSetting.topNavigation,
                    left: config.value.colorSetting.bothSidesNavigation,
                    content: config.value.colorSetting.viewPageNavigation,
                    bottom: config.value.colorSetting.bottomNavigation
                }
            })
            const getDpaRightStyle = computed(() => {
                const {
                    marginSetting: {
                        rightNavigation: { top = 0, right = 0, bottom = 0, left = 0 }
                    }
                } = config.value
                return `padding: ${top}px ${right}px ${bottom}px ${left}px`
            })
            watch(
                () => props.dpaPortalConfiguration,
                value => {
                    config.value = value
                    handleAddCousomsStyle()
                },
                {
                    deep: true,
                    immediate: true
                }
            )
            // ---------------------------------------------------- 方法
            // 颜色设置
            function handleGetStyle() {
                const { top, left, bottom, content } = dpaPortalColorConfiguration.value
                return `
        .al-layout-custom .@{ant-prefix}-layout .@{ant-prefix}-layout-header{
              background: ${top.backgroundColor};
              color: ${top.textColor};
            }
            .al-layout-custom .dpa-header .logo {
              background: ${top.backgroundColor};
              color: ${top.textColor}
            }
            .al-layout-custom .dpa-header .title .title-value{
              color: ${top.textColor};
              background-image: ${top.textColor};
            }
            .al-layout-custom .dpa-header .config{
              color: ${top.textColor};
            }
            .al-layout-custom .dpa-header .title .@{ant-prefix}-menu-item-selected{
              background: ${top.selectedColor};
            }
            .al-layout-custom .@{ant-prefix}-layout-content .left-menu{
              background: ${left.backgroundColor};
              color: ${left.textColor}
            }
            .al-layout-custom .@{ant-prefix}-layout-content .left-menu .left_dpa .left_navigation_box .left_menue_list .left_menue_list_img{
                color: ${left.textColor}
            }
            .al-layout-custom .@{ant-prefix}-layout-footer{
              background: ${bottom.backgroundColor};
            }
            .al-layout-custom .@{ant-prefix}-layout-footer .footer_box .footer_left_menu .footer_left_menu_list{
              color: ${bottom.textColor}
            }
            .al-layout-custom .@{ant-prefix}-layout-content .right-menu{
              background: ${left.backgroundColor};
            }
            .al-layout-custom .@{ant-prefix}-layout-content .right-menu .dpa-right-menu .menu-list{
              color: ${left.textColor}
            }
            .al-layout-custom .center-content{
              background: ${content.backgroundColor};
            }
            ${getCotentStyle(content)}
          `
            }
            function getSecondaryMenu({ list = [], defaultCode: defaultCodeFromParams }) {
                secondaryMenu.value = list
                defaultCode.value = defaultCodeFromParams
            }
            return {
                isEmpty,
                secondaryMenu,
                config,
                menuInfo,
                defaultCode,
                getDpaRightStyle,
                dpaPortalColorConfiguration,
                getDpaLefMenuStyle,
                getHeaderStyle,
                getFooterStyle,
                BottomMenuList,
                leftMenuList,
                rightMenuList,
                getSecondaryMenu
            }
        }
    })
</script>

<style lang="less" scoped>
    .al-layout-dpa {
        background: #001529;
        height: 100%;
        width: 100%;
        overflow: hidden;
    }

    :deep(.@{ant-prefix}-layout-header) {
        height: auto;
    }

    .dpa-head-linear {
        background-image: linear-gradient(to left, rgba(25, 44, 74, 0.45) 0%, rgba(54, 87, 129, 0.02) 265px);
    }

    :deep(.@{ant-prefix}-layout-content) {
        display: flex;

        .left-menu {
            background: #001529;
            width: 187px;
            overflow: hidden;
        }

        .center-content {
            flex: 1;
            position: relative;
            min-width: 0;
        }

        .right-menu {
            width: 187px;
            overflow: hidden;
        }
    }

    :deep(.@{ant-prefix}-layout-footer) {
        background: #001529;
    }
</style>
